<script lang="ts" setup>

import type { SystemUserApi } from '#/api'; // 引入用户API类型
import { computed, ref } from 'vue'; // 引入Vue的响应式API
import { useVbenDrawer } from '@vben/common-ui'; // 引入Vben抽屉组件
import { useVbenForm } from '#/adapter/form'; // 引入Vben表单适配器
import { createUser, updateUser } from '#/api'; // 引入创建和更新用户的API
import { getRoleList } from '#/api/system/role'; // 导入获取角色列表的API
import { $t } from '#/locales'; // 引入国际化方法
import { useFormSchema } from '../data'; // 引入表单schema
import { message } from 'ant-design-vue'; // 导入 message 组件
import { useUserStore } from '@vben/stores';
const userStore = useUserStore();
const emits = defineEmits(['success']); // 定义emits，抛出success事件
const formData = ref<SystemUserApi.SystemUser>(); // 当前表单数据

const roleOptions = ref<Array<{ label: string; value: string }>>([]); // 用于存储动态角色选项

const formSchemas = computed(() => useFormSchema(roleOptions)); // 计算属性，生成表单schema

const [Form, formApi] = useVbenForm({
  schema: formSchemas.value, // 绑定表单schema
  showDefaultActions: false, // 不显示默认操作按钮
});
const id = ref(); // 当前用户id
const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() { // 抽屉确认时触发
    const { valid } = await formApi.validate(); // 校验表单
    if (!valid) return; // 校验不通过直接返回
    const values = await formApi.getValues(); // 获取表单所有值
    // 只传递 url 给后端
    if (Array.isArray(values.avatar) && values.avatar.length > 0) { // 如果avatar是数组且有值
      // 新上传的图片有 response.url，回显的图片只有 url
      values.avatar = values.avatar[0].response?.url || values.avatar[0].url || ''; // 取url
    } else {
      values.avatar = ''; // 没有图片则传空字符串
    }
    drawerApi.lock(); // 锁定抽屉，防止重复提交
    const isUpdate = !!id.value; // 判断是新增还是编辑
    (isUpdate ? updateUser(id.value, values) : createUser(values)) // 调用API
      .then(() => {
        // 根据是创建还是更新显示不同的提示信息
        message.success(isUpdate ? $t('common.updateSuccess') : $t('common.createSuccess'));
        emits('success'); // 抛出success事件
        drawerApi.close(); // 关闭抽屉
        //如果修改当前用户 === 更新用户数据 
        if(id.value === userStore.userInfo?.id) window.location.reload(); //强制刷新整个页面（更新登录后的他右上角图标）
      })
      .catch(() => {
        drawerApi.unlock(); // 解锁抽屉
      });
  },
  async onOpenChange(isOpen) { // 抽屉打开/关闭时触发
    if (isOpen) {
      // 在设置表单数据前，首先确保角色选项已经从后端加载完成。
      await loadRoleOptions(); // 加载角色选项
      const data = drawerApi.getData<SystemUserApi.SystemUser>(); // 获取抽屉传递的数据
      formApi.resetForm(); // 重置表单
      if (data) {
        formData.value = data; // 设置当前表单数据
        id.value = data.id; // 设置当前用户id
        localStorage.setItem("updateUserInfoById",id.value)
        // 处理 avatar 字段为 Upload 组件需要的对象数组格式
        let avatar = data.avatar; // 获取avatar字段
        if (avatar && typeof avatar === 'string') { // 如果avatar是字符串（url）
          avatar = [{
            uid: '-1', // 唯一标识
            name: avatar.split('/').pop() || 'avatar.png', // 文件名
            status: 'done', // 状态
            url: avatar, // 图片url
          }];
        } else if (!avatar) { // 如果没有avatar
          avatar = []; // 设为空数组
        }
        // 设置表单值，包括角色ID
        formApi.setValues({
          ...data, // 其他数据
          avatar, // 处理后的avatar
          roles: data.roleIds || [] // 使用roleIds作为角色选择的值
        });
      } else {
        // 处理新增用户的情况
        id.value = undefined; // 新增时id为空
      }
    }
  },
});

// 加载角色选项的函数
async function loadRoleOptions() {
  try {
    // 根据 request.ts 中的 responseReturn: 'data' 配置，
    // getRoleList 的返回结果 response 实际上就是后端响应的 'data' 部分。
    // 因此，response 会是 { total: 3, items: [...] } 这样的结构。
    const response: any = await getRoleList({}); // 获取角色列表
    //只保留  items -> Status === 1 的数据
    response.items = response.items.filter((item: any) => item.status === 1); // 过滤出启用的角色
    // 检查 response 是否存在且包含 items 属性
    if (response && response.items && Array.isArray(response.items)) {
      roleOptions.value = response.items.map((role: any) => ({
        label: role.name, // 角色名
        value: role.id, // 角色id
      }));
    } else {
      // 如果后端返回数据结构不符合预期，打印详细信息
      console.error('加载角色选项失败：后端返回数据结构异常或items为空', response);
      message.error('加载角色选项失败！');
    }
  } catch (error) {
    console.error('加载角色选项失败:', error); // 捕获异常
    message.error('加载角色选项失败！');
  }
}

const getDrawerTitle = computed(() => {
  return formData.value?.id
    ? $t('common.edit', $t('system.user.name')) // 编辑用户
    : $t('common.create', $t('system.user.name')); // 新增用户
});
</script>
<template>
  <Drawer :title="getDrawerTitle"> <!-- 抽屉标题 -->
    <Form></Form> <!-- 表单组件 -->
  </Drawer>
</template>
